<template>
    <div>
        <ElMenu :unique-opened="true" :router="true">
            <template v-for="item in router.options.routes" >
            <ElSubMenu v-if="item.children" :index="item.path">
                <template #title>{{ item.name }}</template>
                <template v-if="item.children?.length>0">
                    <ElMenuItemGroup>
                        <ElMenuItem v-for="child in item.children" :key="child.name" :index="child.path">{{ child.name }}</ElMenuItem>
                    </ElMenuItemGroup>
                </template>
            </ElSubMenu>
            <ElMenuItem v-else :index="item.path">{{ item.name }}</ElMenuItem>
            </template>
        </ElMenu>
    </div>
</template>
<script setup>
import { ElMenu,ElSubMenu,ElMenuItem,ElMenuItemGroup } from 'element-plus';
import { useRouter,useRoute } from 'vue-router';
const router = useRouter();
console.log(router,'router');
const route = useRoute();
console.log(route,'route');

</script>
<!-- <script setup>
//浅拷贝
const obj1 = {name:"张三",age:20}
const obj2=obj1
obj2.age=30
// console.log(obj1)
// 1 深拷贝 
const obj3 = JSON.parse(JSON.stringify(obj1))
obj3.age=40
// console.log(obj3,obj1)
// 测试

const o2 = {sex:new Date()}
const o1 = {name:"张三",age:o2}
const o3 = JSON.parse(JSON.stringify(o1))
// o3.age.sex=25
// 结论 它可以实现深拷贝 但是 如果出现特殊的数据类型会有问题 比如 new Date() 和函数 正则

// 2 解构运算符
const oo1 = {name:"张三",age:20}
const oo2 = {...oo1}
oo1.age = 25
console.log(oo2,26)
// 测试
const ooo1 = {sex:"男"}
const ooo2={name:"张三",age:ooo1}
const ooo3 = {...ooo2}
ooo1.sex = "女"
console.log(ooo3,32)
console.log(ooo2,33)
// 结论 ： 当使用三点运算符 解构 1级对象的时候 是属于深拷贝，但是如果用它解构2级对象 则会出现问题 不是深拷贝
function deepCopy(obj) {
    if (obj === null || typeof obj !== 'object') {
        return obj;
    }

    let copy = Array.isArray(obj) ? [] : {};

    for (let key in obj) {
        if (obj.hasOwnProperty(key)) {
            copy[key] = deepCopy(obj[key]);
        }
    }

    return copy;
}

// let original = { a: 1, b: { c: 2 } };
// let copy = deepCopy(original);

</script> -->